﻿<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <script src="js/jquery-3.1.1.js"></script>
    <link href="css/mi.css" rel="stylesheet">
</head>
<body>
    <div class="top">
        <div class="top-list">
            <ul>
                <li>小米网</li>
                <li>MIUI</li>
                <li>米聊</li>
                <li>游戏</li>
                <li>多看阅读</li>
                <li>云服务</li>
                <li>小米网移动版</li>
                <li>问题反馈</li>
                <li style="border:0;"><span>Select Region</span> </li>
            </ul>
            <ul class="top-right">
                    <li>登录</li>
                    <li style="border:0;">注册</li>

                    <li style="border:0;height:50px;margin-top:0px;line-height:50px" class="buy"><img src="images/buy.png"/>购物车(0)</li>
            </ul>
        </div>
    </div>
    <div class="top-list2">
        <div class="logo">
            <img src="images/LOGO.png">
            <img src="images/donghua.gif">
        </div>
        <ul>
            <li>小米盒子</li>
            <li>红米</li>
            <li>平板</li>
            <li>电视</li>
            <li>盒子</li>
            <li>路由器</li>
            <li>智能硬件</li>
            <li>服务</li>
            <li>社区</li>
        </ul>
        <div class="search">
            <input type="text"/>
            <button>小米手机4c</button>
            <button>平衡车</button>
        </div>
    </div>
    <div class="middle">
        <div class="middle-left">
            <ul>
                <li>手机 平板 电话卡<span style="float:right;margin-right:30px;">></span></li>
                <li>电视 盒子<span style="float:right;margin-right:30px;">></span></li>
                <li>路由器 智能硬件<span style="float:right;margin-right:30px;">></span></li>
                <li>移动电源 插线板<span style="float:right;margin-right:30px;">></span></li>
                <li>耳机 音箱<span style="float:right;margin-right:30px;">></span></li>
                <li>电池 存储卡<span style="float:right;margin-right:30px;">></span></li>
                <li>保护套 后盖<span style="float:right;margin-right:30px;">></span></li>
                <li>贴膜 其他配件<span style="float:right;margin-right:30px;">></span></li>
                <li>米兔 服装<span style="float:right;margin-right:30px;">></span></li>
                <li>箱包 其他周边<span style="float:right;margin-right:30px;">></span></li>
            </ul>
            <div class="middle-left-list">
                <ul>
                    <li><img style="margin-left:20px;" src="images/phone_img.png"></li>
                    <li>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                    </li>
                    <li><img style="margin-left:20px;" src="images/phone_img01.png"></li>
                    <li>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                        <button>选购</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="middle-img">
            <ul>
                <li><img src="images/banner01.jpg"></li>
                <li><img src="images/banner02.jpg"></li>
                <li><img src="images/banner03.jpg"></li>
                <li><img src="images/banner04.jpg"></li>
                <li><img src="images/banner05.jpg"></li> 
            </ul>
        </div>

    </div>
     <img src="images/arrow_leftbtn01.png" style="top:320px;left: 300px;position:absolute;z-index: 0;" class="leftbtn" onclick="leftimg()">
     <img src="images/arrow_rightbtn01.png" style="top:320px;left: 1220px;position:absolute;z-index: 0;" class="rightbtn" onclick="rightimg()">
    
    <div class="middle1">
        <img src="images/left.png">
        <img class="tools_img" src="images/subnav_icon01.png">
        <img class="tools_img" src="images/subnav_icon02.jpg">
        <img class="tools_img" src="images/subnav_icon03.png"> 
    </div>
    <div class="bottom">
        <ul class="bottom-service">
            <li><img src="images/footer_icon01.png"><a href="#">1小时快修服务</a></li>
            <li><img src="images/footer_icon02.png"><a href="#">1小时快修服务</a></li>
            <li><img src="images/footer_icon03.png"><a href="#">1小时快修服务</a></li>
            <li><img src="images/footer_icon04.png"><a href="#">1小时快修服务</a></li>
            <li style="border:0px"><img src="images/footer_icon05.png"><a href="#">1小时快修服务</a></li>
        </ul>
        <hr/>
        <table>
            <tr>
               <th>帮助中心</th>
               <th>服务支持</th>
               <th>线下门店</th>
               <th>关于小米</th>
               <th>关注我们</th> 
               <th>特色服务</th>
            </tr>
            <tr>
                <td>购物指南</td>
                <td>支付方式</td>
                <td>配送方式</td>
                <td>服务支持</td>
                <td>自助服务</td>
                <td>相关下载</td>
            </tr>
            <tr>
                <td>线下门店</td>
                <td>小米之家</td>
                <td>服务网点</td>
                <td>线下专区</td>
                <td>关于小米</td>
                <td>了解小米</td>
            </tr>
            <tr>
                <td>加入小米</td>
                <td>联系我们</td>
                <td>关注我们</td>
                <td>新浪微博</td>
                <td>小米部落</td>
                <td>官方微信<td/>
            </tr>
        </table>
        <div class="word">探索黑科技，小米为发烧而生</div>
        <div class="bottom-tel">
            <p style="font-size: 20px;
    color: #ff6700;">400-100-5678</p>
            <p>周一至周日 8:00-18:00</p>
            <p>（仅收市话费）</p>
            <button>24小时在线客服</button>
        </div>
    </div>

   
            <img class="img1" src="images/team_logo.png">
             <div class="bottom1">
            <ul>
                <li>小米网</li>
                <li>MIUI</li>
                <li>米聊</li>
                <li>游戏</li>
                <li>多看阅读</li>
                <li>云服务</li>
                <li>小米后院</li>
                <li>小米天猫店</li>
                <li>小米网移动版</li>
                <li>问题反馈</li>
                <li style="border:0;"><span>Select Region</span> </li>
            </ul><br/>
            <br/>
            <p>©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报</p>
            <p>电话：185-0130-1238本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </div>
       
   
 <script type="text/javascript">
    $(function(){
        $(".middle-left").hover(function(){
            $(".middle-left-list").fadeIn("1000");
            $(".leftbtn").css('display','none');
        },function(){
            $(".middle-left-list").fadeOut("1000");
            $(".leftbtn").css('display','block');
        });
        

    });

    var position = 0;
    function leftimg(){
        if(position != -4800){
            position = position-1200;
            $(".middle-img ul").animate({left:position+'px'});
        }else{
            position = 0;
            $(".middle-img ul").animate({left:position+'px'});
        }
    }
    function rightimg(){
        if(position!=0){
            position = position+1200;
            $(".middle-img ul").animate({left:position+'px'});
        }else{
            position = -4800;
            $(".middle-img ul").animate({left:position+'px'});
        }
    }
</script>    
</body>
</html>
